<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件使用的注意事项</title>
		
	</head>
	
	<body>
		<!-- <div id="stuComponent">
			<counter ref='one' @change="sum"></counter>
			<counter ref='two' @change="sum"></counter>
			<div>{{res}}</div>
			
		</div> -->
		
		<div id="component-learn">
			<component-one v-bind:msg='msg' @click.native='hello'></component-one>
			<component-two v-bind:msg='msg'></component-two>
			
		</div>
		
		<script src="js/vue.js"></script>
		<!-- <script>
			Vue.component('self-component',{
				props:['info'],
				data:function(){
					return{
						selfInfo:this.info
					}
				},
				// template:"<tr><td>{{selfInfo.name}}</td><td>{{selfInfo.age}}</td><td>{{selfInfo.sex}}</td></tr>"
			})
			Vue.component('counter',{
				props:[],
				template:"<div @click='handleClick'>{{counterNum}}</div>",
				data:function(){
					return{
						counterNum:0
					}
				},
				methods:{
					handleClick:function(){
						this.counterNum++;
						this.$emit('change',this.counterNum);
					}
				}
			})
			
			let vm = new Vue({
				el:'#stuComponent',
				data:{
					/* list:[
						{name:'zs',age:15,sex:'男'},
						{name:'ls',age:18,sex:'女'},
						{name:'ww',age:13,sex:'男'}
					] */
					res:0
					
				},
				methods:{
					sum:function(){
						this.res = this.$refs.one.counterNum + this.$refs.two.counterNum
					}
				}
			})
		</script> -->
		
		<script type="text/javascript">
			Vue.component('component-one',{
				props:['msg'],
				data:function(){
					return{
						selfMsg:this.msg
					}
				},
				methods:{
					change:function(){
						this.selfMsg = this.selfMsg + 1
					}
				},
				template:"<div v-on:click='change'>{{this.selfMsg}}</div>"
			})
			
			Vue.component('component-two',{
				props:['msg'],
				methods:{
					change:function(){
						this.msg = this.msg + 1
					}
				},
				template:"<div v-on:click='change'>{{this.msg}}</div>"
			})
			
			let vm = new Vue({
				el:'#component-learn',
				data:{
					msg:1
				},
				methods:{
					hello:function(){
						console.log('hello')
					}
				}
			})
		</script>
	
	</body>
</html>
